<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:19:22
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 引入g2plot
// 对象的解构
import { Column } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    // 将实例化对象的函数封装起来
    let initChart = () => {
      const data = [
        {
          year: "1月",
          value: 3000,
          type: "个人",
        },
        {
          year: "2月",
          value: 4000,
          type: "个人",
        },
        {
          year: "3月",
          value: 3000,
          type: "个人",
        },
        {
          year: "4月",
          value: 4500,
          type: "个人",
        },
        {
          year: "5月",
          value: 2100,
          type: "个人",
        },
        {
          year: "6月",
          value: 1600,
          type: "个人",
        },
        {
          year: "1月",
          value: 3800,
          type: "企业",
        },
        {
          year: "2月",
          value: 2100,
          type: "企业",
        },
        {
          year: "3月",
          value: 4200,
          type: "企业",
        },
        {
          year: "4月",
          value: 3900,
          type: "企业",
        },
        {
          year: "5月",
          value: 2200,
          type: "企业",
        },
        {
          year: "6月",
          value: 1100,
          type: "企业",
        },
      ];
      // 实例化一个Colunm对象
      const column = new Column(root.value, {
        data,
        isStack: true,
        xField: "year",
        yField: "value",
        seriesField: "type",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });
      // 渲染
      column.render();
    };
    onMounted(initChart);
    return {
      root,
    };
  },
};
</script>